<template>
  <ElCard class="box-card">
    <RouterLink class="blog-item--wrap" :to="{ name: 'article', params: { id } }">
      <!-- 文章语义 -->
      <article class="blog-content--item">
        <!-- 点击article, 进入前端路由, 前端路由获取到文章id, 向http发送byId请求
  a标签使用javascript接管, 进入前端路由, 否则会一直跳转 -->
        <h3 class="blog-item--title">{{ article.title }}</h3>
        <div class="blog-item--author">作者: {{ nickName }}</div>
        <div class="blog-item--date"><i class="glyphicon glyphicon-time" />{{ article.date }}</div>
        <!-- 插图 -->
        <img :src="article.cover" alt="!" class="blog-item--illu" />
        <div class="blog-item--content">{{ content }}</div>
        <div class="blog-item--tags">
          <span class="blog-btn--hits">浏览({{ article.hits }})</span
          ><span class="blog-btn--like">点赞({{ article.likes }})</span>
          <span class="blog-btn--com">评论({{ article.conment_num }})</span>
        </div>
      </article>
    </RouterLink>
  </ElCard>
</template>

<script setup lang="ts">
import { toRefs, computed, defineProps } from 'vue'

let props = defineProps<{ article: any; id: string }>()
let { article, id } = toRefs(props)
let nickName = computed(() => {
  return article.value?.author?.nickName || '默认名称'
})
let content = computed(() => {
  let content = article.value?.content.match(/>([^<>]*)</)?.[1].slice(0, 30)
  return content
})
</script>

<style lang="less">
@import url('@/assets/css/variable.less');

.blog-item--wrap {
  text-decoration: none;
}

.blog-item--wrap:hover {
  text-decoration: underline;
}

.blog-content .el-card__body {
  padding: 0;
}

.blog-content .box-card:not(:first-child) {
  margin: @padding-space * 3 0;
}

.blog-content--item {
  padding: @padding-space * 3 0;
  overflow: hidden;
  text-align: center;
  background-color: @bg-theme-color;
  border-radius: @radius-size;
}

.blog-item--title {
  padding: @padding-space * 2;
  font-size: @font-size-h * 2;
  color: @font-theme-color;
}

.blog-item--date {
  padding: @padding-space * 2;
  font-size: @font-size-p;
  color: @font-modifier-color;
}

.blog-item--author {
  font-size: @font-size-p;
  color: @font-modifier-color;
}

.blog-content--item .blog-item--illu {
  width: auto;
  height: 12vw;
  min-height: 118px;
}

.blog-item--content {
  padding: @padding-space * 3;
  font-size: @font-size-p;
  text-align: left;
  text-indent: 2em;

  &:hover {
    color: @font-theme-color;
  }
}

.blog-item--tags {
  display: flex;
  justify-content: flex-end;
  padding: 0 @padding-space * 3;
  font-size: 14px;
}

.blog-btn--hits,
.blog-btn--like,
.blog-btn--com {
  padding-right: @padding-space * 2;
  color: linear-gradient(@font-modifier-color, 20%);

  &:hover {
    color: linear-gradient(@font-modifier-color, 60%);
  }
}

.blog-info--item {
  padding-right: @padding-space;
  opacity: 0.6;
}

.blog-content--item img {
  display: block;
  width: 50%;
  height: auto;
  margin: (@padding-space * 1.5) auto;
}

.blog-btn--article {
  padding-top: @padding-space;
}
</style>
